import React from 'react';
import PropTypes from 'prop-types';
import { getTheme } from 'office-ui-fabric-react';

const theme = getTheme();

const getStyles = (borderless, style) => ({
  padding: '.6em',
  marginBottom: '.6em',
  borderStyle: borderless ? 'none' : 'solid',
  borderWidth: borderless ? 0 : '1px',
  borderColor: theme.palette.neutralQuaternaryAlt,
  ...style
});

const dividerStyles = {
  color: theme.palette.neutralQuaternaryAlt,
  backgroundColor: theme.palette.neutralQuaternaryAlt
};

const Section = ({ borderless, showDivider, style, title, children }) => {
  return (
    <section style={getStyles(borderless, style)}>
      {title && <h3 style={{ marginTop: 0 }}>{title}</h3>}
      {showDivider && <hr style={dividerStyles} />}
      {children}
    </section>
  );
};

Section.defaultProps = {
  borderless: false,
  showDivider: false,
  style: {}
};

Section.propTypes = {
  title: PropTypes.any,
  borderless: PropTypes.bool,
  showDivider: PropTypes.bool,
  style: PropTypes.object
};

export default Section;
